import React, { memo, useState } from 'react'
import { FilterWrapper } from './style'
import filterData from '@/assets/data/filter_data'
import classNames from 'classnames'

const EntireFilter = memo(() => {
  const [selectItems, setSelectItems] = useState([]);

  function itemClickHandler(item){
    const newSelectItems = [...selectItems]
    // newSelectItems.push()
    const itemIndex = newSelectItems.indexOf(item);
    if(itemIndex===-1) {
      newSelectItems.push(item)
    } else {
      newSelectItems.splice(itemIndex, 1)
    }
    setSelectItems(newSelectItems)

  }

  return (
    <FilterWrapper>
      <div className="filter">
        {filterData.map(item=>{
          return (
            <div key={item} 
              onClick={e=>itemClickHandler(item)}
              className={classNames('item', { active: selectItems.includes(item)})}>
                {item}
            </div>)
        })}
      </div>
    </FilterWrapper>
  )
})

export default EntireFilter